<template>
	<div>
		<el-container>
			<el-header >
				<div class="back" @click="back">取消</div>
				<div style="font-size: 24px; color: #565556;">编辑游戏</div>
				<div class="save" @click="save">保存</div>
			</el-header>
			<el-main>
				<div class="edit_980">
					<div class="dis align-items" >
						<div style="width: 166px; height: 125px;">
							<el-image :src="userInfo.ImgUrl"></el-image>
						</div>
						<div class="right">
							{{userInfo.name}}
						</div>
						<div class="bian" @click="create(userInfo)"></div>
					</div>
					<div class="line"></div>
					<div v-if="list.wen!=undefined">
						<div class="edit_he"  v-for="(item,index) in list" :key="index">
							<div class="dis" style="padding: 20px;">
								<div class="edit_left">
									<div class="flex align-items">
										<div class="edit_numb">1</div>
										<div style="color:#535353 ;">
											{{item.wen}}
										</div>
									</div>
									<div class="edit_anniu">
										<span @click="FillInWrite">
											<i class="el-icon-edit"></i>
											编辑
										</span>
										<span @click="copy(item)">
											<i class="el-icon-document-copy"></i>
											复制
										</span>
										<span @click="config(item,index)">
											<i class="el-icon-delete"></i>
											删除
										</span>
									</div>
								</div>
								<div class="edit_right align-items">
									<div>
										<div class="el-icon-time" style="font-size: 25px;"></div>
										<div>{{item.time || 0}}s</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			
					<div class="edit_he" >
						<div style="margin: 0 auto;display: flex;justify-content: center;" class="align-items">
							<div style="margin-top: 30px;" class="center" @click="add">
								<div class="edit_add">+</div>
								<div style="margin-left: -8px; color: #999999;" >添加题目</div>
							</div>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					name:'',
					ImgUrl:''
				},
				list:[],
				listlength:''
			}
		},
		created() {
			if(this.userInfo.ImgUrl == '' ){
				this.userInfo.ImgUrl = 'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/images/game/game_default.png'
			} else {
				console.log('4455',this.$route.query.name)
				
				this.userInfo.ImgUrl=this.$route.query.ImgUrl
				
			}
			this.userInfo.name=this.$route.query.name,
			this.list.push({
				wen:this.$route.query.wen,
				time:this.$route.query.time
			}) 
			console.log('52526',this.list)
			
		},
		methods:{
			//添加
			add(){
				this.$router.push({path:'/FillInWrite'})
			},
			create(i){
				this.$router.push({
					path:'/create',
					query:{
						name:i.name,
						ImgUrl:i.ImgUrl
					}
				})
			},
			//保存
			save(){
				
			},
			//取消
			back(){
				
				if(this.list.length>0){
					this.$confirm('是否放弃已更新内容?', '操作提示', {
					  confirmButtonText: '放弃',
					  cancelButtonText: '取消',
					  type: 'info'
					}).then(() => {
					  this.$router.push({path:'/game'})
					}).catch(() => {
					        
					});
				} else {
					this.$confirm('你没有创建题目，关闭后无法保存该游戏。是否放弃保存?', '操作提示', {
					  confirmButtonText: '放弃',
					  cancelButtonText: '取消',
					}).then(() => {
					  this.$router.go(-1)
					}).catch(() => {
					        
					});
				}
			},
			//编辑
			FillInWrite(){
				this.$router.push({path:'/FillInWrite'})
			},
			copy(e){
				var that = this
				this.list.push({
					wen:e.wen,
					time:e.time
				})
			},
			//删除
			config(i,k){
				this.$confirm('是否删除题目?', '操作提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  
				  this.list.splice(k)
				}).catch(() => {
				        
				});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.bian{
		width: 30px;
		height: 30px;
		background: url();
		background-size: 30px 30px;
		cursor: pointer;
		margin-top: 15px;
	}
	.edit_add{
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #dbdbdb;
		color: #FFFFFF;
		font-size: 35px;
		text-align: center;
		margin-bottom: 2px;
	}
	.edit_anniu{
		margin-top: 40px;
		margin-left: 60px;
		span{
			height: 27px;
			font-size: 14px;
			color: #333333;
			width: 69px;
			padding: 2px 10px;
			margin-left: 10px;
			border-radius: 6px;
			background-color: #dbdbdb;
		}
	}
	.edit_numb{
		width: 60px;
		height: 40px;
		background: #dbdbdb;
		border-radius: 4px;
		font-size: 28px;
		text-align: center;
		color: #535353;
		margin-right: 25px;
	}
	.edit_left{
		width: 40%;
	}
	.edit_he{
		border: 1px solid #dbdbdb;
		height: 145px;
		margin-top: 25px;
	}
	.right{
		width: 75%; display: flex;align-items: center; font-size: 24px; color: #666666;
	}
	.line{
		border-bottom: 1px solid #000000;
		margin-top: 15px;
		margin-bottom: 10px;
	}
	.edit_980{
		width: 980px;
		margin: 25px auto;
	}
	.el-header{
		position: relative;
		width: 100%;
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		border-bottom: 1px solid #ebebeb;
	  }
	 .save{
		 cursor: pointer;
		 width: 100px;
		 height: 40px;
		 margin-top: 8px;
		 line-height: 40px;
		 top: 0;
		 position: absolute;
		 background-color: #2eb1ff;
		 color: #FFFFFF;
		 border-radius: 3px;
		 right: 25px;
	 }
	.back{
		cursor: pointer;
		width: 100px;
		height: 40px;
		margin-top: 8px;
		line-height: 40px;
		position: absolute;
		
		border: 1px solid #d9d9d9;
		border-radius: 3px;
	}
</style>
